<template>
  <div style="">
    <!--  如果是text类型-->
    <el-input v-if="item.formType == 'text'"
              v-model="fieldFrom[item.fieldName]"
              :disabled="item.disabled || disabled"
              :maxlength="60"
              :placeholder="item.placeholder"
              :type="item.formType"
              @input="commonChange(item, index, $event)"/>
    <!--  如果是floatnumber且禁用、mobile、email、website类型-->
    <el-input v-else-if="hookMixin.isTrimInput(item.formType, item.disabled || disabled)"
              v-model.trim="fieldFrom[item.fieldName]"
              :disabled="item.disabled || disabled"
              :maxlength="hookMixin.getInputMaxlength(item.formType)"
              :placeholder="item.placeholder"
              type="text"
              @input="commonChange(item, index, $event)"/>
    <!--  如果是number类型-->
    <el-input-number v-else-if="item.formType == 'number'"
                     v-model="fieldFrom[item.fieldName]"
                     :placeholder="item.placeholder"
                     :disabled="item.disabled || disabled"
                     :controls="false"
                     @change="commonChange(item, index, $event)"/>
    <!--  如果是floatnumber类型-->
    <el-input-number v-else-if="item.formType == 'floatnumber'"
                     v-model="fieldFrom[item.fieldName]"
                     :placeholder="item.placeholder"
                     :disabled="item.disabled || disabled"
                     :controls="false"
                     @change="commonChange(item, index, $event)"/>
    <!--  如果是percent类型-->
    <WkPercentInput v-else-if="item.formType == 'percent'"
                    v-model:value="fieldFrom[item.fieldName]"
                    :placeholder="item.placeholder"
                    :disabled="item.disabled || disabled"
                    :controls="false"
                    @change="commonChange(item, index, $event)"/>
    <!--  如果是textarea类型-->
    <el-input v-else-if="item.formType == 'textarea'"
              v-model="fieldFrom[item.fieldName]"
              :disabled="item.disabled || disabled"
              :rows="3"
              :autosize="{ minRows: 3}"
              :maxlength="item.maxlength || 800"
              :placeholder="item.placeholder"
              :type="item.formType"
              resize="none"
              @input="commonChange(item, index, $event)"/>
    <!--  如果是select类型-->
    <WkSelect v-else-if="['select'].includes(item.formType)"
              v-model:value="fieldFrom[item.fieldName]"
              :disabled="item.disabled || disabled"
              :clearable="item.clearable"
              :placeholder="item.placeholder"
              :options="item.setting"
              :show-type="item.precisions === 1 ? 'tiled' : 'default'"
              :other-show-input="item.hasOwnProperty('optionsData')"
              @change="commonChange(item, index, $event)"/>
    <!--  如果是checkbox类型-->
    <WkCheckbox v-else-if="['checkbox'].includes(item.formType)"
                v-model:value="fieldFrom[item.fieldName]"
                :disabled="item.disabled || disabled"
                :clearable="item.clearable"
                :placeholder="item.placeholder"
                :options="item.setting"
                :show-type="item.precisions === 1 ? 'tiled' : 'default'"
                :other-show-input="item.hasOwnProperty('optionsData')"
                @change="commonChange(item, index, $event)"/>
    <!--  如果是date类型-->
    <el-date-picker v-else-if="item.formType == 'date'"
                    v-model="fieldFrom[item.fieldName]"
                    :disabled="item.disabled || disabled"
                    clearable
                    style="width: 100%;"
                    type="date"
                    value-format="YYYY.MM.DD"
                    placeholder="选择日期"
                    @change="commonChange(item, index, $event)"/>
    <!--  如果是dateRange类型-->
    <el-date-picker v-else-if="item.formType == 'dateRange'"
                    v-model="fieldFrom[item.fieldName]"
                    :disabled="item.disabled || disabled"
                    :type="item.dateType || 'daterange'"
                    :value-format="item.dateValueFormat || 'YYYY.MM.DD'"
                    clearable
                    style="width: 100%;vertical-align: middle;"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="commonChange(item, index, $event)"/>
    <!--  如果是datetime类型-->
    <el-date-picker v-else-if="item.formType == 'datetime'"
                    v-model="fieldFrom[item.fieldName]"
                    :disabled="item.disabled || disabled"
                    clearable
                    ref="datetime"
                    style="width: 100%;"
                    type="datetime"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    @focus="hookMixin.dateTimeFocus"
                    placeholder="选择日期"
                    @change="commonChange(item, index, $event)"/>
    <!--  如果是structure类型-->
    <WkDepSelect v-else-if="item.formType == 'structure'"
                 v-model:value="fieldFrom[item.fieldName]"
                 :request="item.request"
                 :props="item.props"
                 :params="item.params"
                 :disabled="item.disabled || disabled"
                 :radio="!hookMixin.isEmptyValue(item.radio) ? item.radio : true"
                 style="width: 100%;"
                 @change="depOrUserChange(item, index, arguments[0], arguments[1])"/>
    <!--  如果是single_user、user类型-->
    <WkUserSelect v-else-if="['single_user', 'user'].includes(item.formType)"
                  v-model:value="fieldFrom[item.fieldName]"
                  :request="item.request"
                  :props="item.props"
                  :params="item.params"
                  :disabled="item.disabled || disabled"
                  :radio="!hookMixin.isEmptyValue(item.radio) ? item.radio : true"
                  style="width: 100%;"
                  @change="depOrUserChange(item, index, arguments[0], arguments[1])"/>
    <!--  如果是radio类型-->
    <el-radio-group v-else-if="item.formType == 'radio'"
                    v-model="fieldFrom[item.fieldName]"
                    :disabled="item.disabled || disabled"
                    :placeholder="item.placeholder"
                    @change="commonChange(item, index, $event)">
      <el-radio v-for="(item, index) in item.setting" :key="index"
                :label="!hookMixin.isEmptyValue(item.value) ? item.value : item">
        {{ !hookMixin.isEmptyValue(item.value) ? item.label || item.name : item }}
      </el-radio>
    </el-radio-group>
    <!--  如果是boolean_value类型-->
    <el-switch v-else-if="item.formType == 'boolean_value'"
               v-model="fieldFrom[item.fieldName]"
               :disabled="item.disabled || disabled"
               active-value="1"
               inactive-value="0"
               @change="commonChange(item, index, $event)"/>
    <!--  如果是position类型-->
    <WkPosition v-else-if="item.formType == 'position'"
                :hide-area="item.hideArea"
                :only-province="item.onlyProvince"
                :show-detail="item.showDetail"
                v-model:value="fieldFrom[item.fieldName]"
                :disabled="item.disabled || disabled"
                @change="commonChange(item, index, $event)"/>
    <!--  如果是location类型-->
    <WkLocation v-else-if="item.formType == 'location'"
                v-model:value="fieldFrom[item.fieldName]"
                :disabled="item.disabled || disabled"
                @change="commonChange(item, index, $event)"/>
    <!--  如果是handwriting_sign类型-->
    <WkSignaturePad v-else-if="item.formType == 'handwriting_sign'"
                    v-model:value="fieldFrom[item.fieldName]"
                    :disabled="item.disabled || disabled"/>
    <!--  如果是desc_text类型-->
    <WkDescText v-else-if="item.formType == 'desc_text'"
                :value="fieldFrom[item.fieldName]"/>
    <!--  如果是date_interval类型-->
    <el-date-picker v-else-if="item.formType === 'date_interval'"
                    v-model="fieldFrom[item.fieldName]"
                    :type="item.dateType || 'daterange'"
                    :value-format="item.dateValueFormat || 'YYYY.MM.DD'"
                    :disabled="item.disabled || disabled"
                    style="width: 100%;vertical-align: middle;"
                    clearable
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="commonChange(item, index, $event)"/>
    <!--  如果是address类型-->
    <v-distpicker v-else-if="item.formType == 'address'"
                  :province="fieldFrom[item.fieldName].province"
                  :city="fieldFrom[item.fieldName].city"
                  :area="fieldFrom[item.fieldName].area"
                  @province="hookMixin.selectProvince($event, item, index)"
                  @city="hookMixin.selectCity($event, item, index)"
                  @area="hookMixin.selectArea($event, item, index)"/>
    <!--  如果是file类型-->
    <XhFiles v-else-if="item.formType == 'file'"
             :value="fieldFrom[item.fieldName]"
             :disabled="item.disabled || disabled"
             @value-change="oldChange($event, item, index)"/>
    <!--  如果是detail_table类型-->
    <WkDetailTable v-else-if="item.formType == 'detail_table'"
                   :show-type="item.precisions === 2 ? 'table' : 'default'"
                   :title="item.name"
                   :prop-prefix="item.field"
                   :btn-name="item.remark"
                   :add-field-list="item.fieldExtendList"
                   :add-field-form="item.fieldForm"
                   :field-form="fieldFrom[item.fieldName]"
                   :field-list="item.fieldList"
                   :disabled="item.disabled || disabled"/>
  </div>
</template>

<script setup>
import WkUserSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkUserSelect/index.vue'
import WkDepSelect from '/src/szcomponent/NewCom/SzDeptUserComp/WkDepSelect/index.vue'
import WkPosition from '/src/components/NewCom/WkPosition/index.vue'
import WkLocation from '/src/szcomponent/NewCom/szLocationComp/WkLocation/index.vue'
import WkSignaturePad from '/src/components/NewCom/WkSignaturePad/index.vue'
import WkDescText from '/src/components/NewCom/WkDescText/index.vue'
import WkPercentInput from '/src/components/NewCom/WkPercentInput/index.vue'
import WkSelect from '/src/components/NewCom/WkSelect/index.vue'
import WkCheckbox from '/src/components/NewCom/WkCheckbox/index.vue'
import WkDetailTable from '/src/components/NewCom/WkDetailTable/index.vue'
import VDistpicker from '/src/szcomponent/VDistpicker/index.js'
import {XhFiles} from '/src/components/CreateCom/index.js'
import {useHookMixin} from "components/NewCom/WkForm/HookMixin.js";

defineOptions({
  // 字段
  name: 'WkField',
})

const hookMixin = useHookMixin()

const emits = defineEmits(['change'])

/**
 * 常规组件change事件
 */
function commonChange(item, index, value) {
  console.log("fieldFrom", item, index, value)
  console.log("fieldFrom", props.fieldFrom)
  console.log("fieldFrom", props.fieldFrom[item.fieldName])

  emits('change', item, index, value)
}

/**
 * 旧change回调
 */
function oldChange(dataValue, field, index) {
  props.fieldFrom[field.field] = dataValue.value
  emits('change', field, index, dataValue.value)
  // todo whf 这里好像不行
  if (cxt.refs.form) {
    cxt.refs.form.validateField(field.field)
  }
}

/**
 * 部门事件
 */
function depOrUserChange(item, index, value, valueList) {
  emits('change', item, index, value, valueList)
}

function addressChange(item, index, value) {
  emits('change', item, index, value)
}

const props = defineProps({
  item: Object,
  index: Number,
  fieldFrom: {
    type: Object,
    default: () => {
      return {}
    }
  },
})
</script>

<style lang="scss" scoped>
.el-input-number {
  width: 20%;

  :deep(.el-input__inner ) {
    text-align: left;
    padding: 0 8px;
  }
}
</style>
